<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="服务收入" />
        <view class="content">
            <view class="box">
                <image src="/static/technician/joinUs/topbg.png" />
                <view class="inner flex just-between align-center">
                    <view class="price">
                        <view class="top">
                            <view class="withdrawablePrice">1888.88</view>
                            <view class="tip f-26">可提现余额(元)</view>
                        </view>

                        <view class="bottom flex just-between align-center">
                            <view class="cumulative">
                                <view class="price f-36">8888.88</view>
                                <view class="tip f-26">累计收入(元)</view>
                            </view>
                            <view class="notAccountedFor">
                                <view class="price f-36">8888.88</view>
                                <view class="tip f-26">未入账(元)</view>
                            </view>
                        </view>
                    </view>

                    <view class="btn_box">
                        <view class="btn">
                            <view class="f-24 inner">
                                去提现
                                <image
                                    src="/static/technician/joinUs/arrow_right.png"
                                    mode="scaleToFill"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="list">
                <view class="sift">
                    <view class="fb-32">收益明细</view>
                    <view class="date f-28">
                        <picker
                        mode="date"
                        :value="date"
                        @change="bindDateChange"
                    >
                        <view
                            class="uni-input"
                            :class="{ placeholder: !date }"
                        >
                            {{ date || "日期选择" }}
                        </view>
                    </picker>
                        <image
                            src="/static/technician/choose/city_arrow_down.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
                <view class="item card">
                    <view class="left">
                        <image
                            src="/static/technician/joinUs/icon1.png"
                            mode="scaleToFill"
                        />
                        <view class="source">
                            <view class="title fb-28">服务收益</view>
                            <view class="sub f-24">
                                余额：￥{{ balance }}
                            </view>
                        </view>
                    </view>
                    <view class="right">
                        <view class="price fb-36"> +8888.88 </view>
                        <view class="date f-24"> 2020-01-01 12:00:45 </view>
                    </view>
                </view>
            </view>
        </view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            date: "",
            balance: 0,
        };
    },

    mounted() {},

    methods: {
        bindDateChange(e) {
            this.date = e.target.value;
        }
    },
};
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .box {
        width: 100%;
        height: 312rpx;
        position: relative;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .inner {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 30rpx 0 30rpx 40rpx;
        color: #fff;
        box-sizing: border-box;
        .price {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-right: 20rpx;
            .top {
                margin-left: 20rpx;

                .withdrawablePrice {
                    font-size: 48rpx;
                    padding: 20rpx 0;
                }
                .withdrawablePrice::before {
                    content: "¥";
                    font-size: 48rpx;
                }
            }
            .bottom {
                .cumulative,
                .notAccountedFor {
                    text-align: center;
                    .price {
                        display: flex;
                        flex-direction: row;
                        padding: 20rpx 0;
                    }
                    .price::before {
                        content: "¥";
                        font-size: 36rpx;
                        margin-right: 10rpx;
                    }
                }
            }
        }
        .btn_box {
            width: 188rpx;
            height: 100%;
            .btn {
                width: 188rpx;
                height: 72rpx;
                position: relative;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                .inner {
                    height: 72rpx;
                    background: white;
                    border-top-left-radius: 40rpx;
                    border-bottom-left-radius: 40rpx;
                    padding: 10rpx 20rpx;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: $theme-color;

                    image {
                        width: 10rpx;
                        height: 18rpx;
                        margin-left: 12rpx;
                    }
                }
            }
        }
    }

    .list {
        width: 100%;
        height: 100%;
        margin-top: 20rpx;
        .sift {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .date {
                display: flex;
                align-items: center;
                color: #999999;
                padding: 18rpx 24rpx;
                background: #ececec;
                border-radius: 34rpx;
                image {
                    width: 26rpx;
                    height: 14rpx;
                    margin-left: 12rpx;
                }
            }
        }

        .item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                align-items: center;
                image {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 20rpx;
                }
                .source {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .title {
                        color: #333;
                        margin-bottom: 10rpx;
                    }
                    .sub {
                        color: #999999;
                    }
                }
            }

            .right {
                display: flex;
                flex-direction: column;
                text-align: right;
                .price {
                    color: #333;
                    margin-bottom: 10rpx;
                }
                .date {
                    color: #999999;
                }
            }
        }
    }
}
.card {
    width: 100%;
    height: 132rpx;
    background: white;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
}
</style>